<%--
  Created by IntelliJ IDEA.
  User: chenxiaojun
  Date: 2020/7/1
  Time: 8:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>回收站</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
<div id="root">
    <Collapse>
        <Panel name="1">
            条件查询
            <p slot="content">
                <i-form :label-width="60" inline>
                    <Form-Item label="商品名称">
                        <i-input v-model="comVo.name"></i-input>
                    </Form-Item>
                    <Form-Item label="商品货号">
                        <i-input v-model="comVo.productSn" clearable  style="width: 120px;"></i-input>
                    </Form-Item>
                    <Form-Item label="商品分类">
                        <i-Select v-model="comVo.productCategoryId" clearable  style="width: 120px;">
                            <i-Option v-for="item in sortList" :value="item.id" :key="item.id">{{item.sortName}}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <Form-Item label="商品品牌">
                        <i-Select v-model="comVo.brandId" clearable  style="width: 120px;">
                            <i-Option v-for="item in brandList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <Form-Item label="审核" :label-width="40">
                        <i-Select v-model="comVo.verifyStatus" clearable  style="width: 120px;">
                            <i-Option v-for="item in verifyList" :value="item.value" :key="item.value">{{item.label}}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <i-button type="primary" @click="pageNo=1;getList();" >搜索</i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <Card style="margin: 20px 0" >

        <Icon type="ios-film-outline"></Icon>
        数据列表
    </Card>
    <i-table :columns="columns" :data="data" @on-selection-change="tableSelect=arguments[0]" border stripe height="450">
        <template slot-scope="scope" slot="pic"><img width="100px" height="100px" :src="scope.row.pic"></template>
        <template slot-scope="scope" slot="name">商品名称: {{ scope.row.name }} <br/>品牌: {{ scope.row.brand.name }}</template>
        <template slot-scope="scope" slot="price">价格: {{ scope.row.price }} <br>货号: {{ scope.row.productSn }}</template>
        <template slot-scope="{row,index}" slot="action">
                <i-Button type="info" size="large" @click="hui(row,index)">恢复</i-Button>
                <i-Button type="info" size="large" @click="del(row,index)">删除</i-Button>
        </template>
    </i-table>
    <template>
        <Page :total="total1"
              show-elevator
              :page-size="pageSize"
              :current.sync="pageNo"
              show-total
              show-sizer
              :page-size-opts="[5,10,15,20]"
              style="margin-left: 30%;"
              @on-page-size-change="pageSize=arguments[0];getList();"
              @on-change="getList"/>
    </template>
</div>

</body>
<script>
    new Vue({
        el:"#root",
        data: {
            columns: [
                // {
                //     type: "selection",
                //     width: 60,
                //     align: "center"
                // },
                {title: "编号", key: "id"},
                {title: "商品图片", slot: "pic"},
                {title: "商品名称/品牌", slot: "name"},
                {title: "商品价格/货号", slot: "price"},
                {title: "销量", key: "sale"},
                {title: "操作", slot: "action"},
            ],
            data: [],
            sortList: [],
            brandList: [],
            comVo:{},
            total1:{},
            pageSize:5,
            pageNo:1,
            verifyList:[
                {
                    value: '0',
                    label: '未审核'
                },
                {
                    value: '1',
                    label: '审核通过'
                },
                {
                    value: '2',
                    label: '审核拒绝'
                },
            ],
        },
        mounted(){
            this.getList();
            this.getsort();
            this.getbrandList();
        },
        methods: {
            getList(){
                axios.post(`/sys/com/list2/${this.pageSize}/${this.pageNo}`,this.comVo).then(
                    ({data})=>{
                        this.data=data.result.list;
                        this.total1 = data.result.total;
                    }
                )
            },
            getbrandList(){
                axios.post("sys/brand/brandlist").then(
                    ({data})=>{
                        this.brandList = data.result;
                    }
                )
            },
            getsort(){
                axios.post("/sys/cla/sortlist").then(
                    ({data})=>{
                        this.sortList = data.result;
                    }
                )
            },

            hui(row,index){
                let _this = this;
                    iview.Modal.confirm({
                        title:"确定是否要回复?",
                        onOk(){
                            axios.get("/sys/com/hui?id="+row.id)
                                .then(({data})=>{
                                    iview.Message.success({content:data.msg});
                                    if(index==0){
                                        if(_this.pageNo!=1){
                                            _this.pageNo=_this.pageNo-1;
                                        }
                                    };
                                    _this.getList();
                                    _this.getsort();
                                    _this.getbrandList()

                                })
                        },
                        onCancel(){
                            iview.Message.info("取消回复")
                        }
                    })
            },

            del(row,index){
                let _this = this;
                iview.Modal.confirm({
                    title:"您确定要删除吗？",
                    content:"此操作是不可逆的",
                    onOk(){
                        axios.get("/sys/com/del?id="+row.id).then(
                            ({data})=>{
                                iview.Message.success({content:data.msg});
                                if(index==0){
                                    if(_this.pageNo!=1){
                                        _this.pageNo=_this.pageNo-1;
                                    }
                                };
                                _this.getList();
                                _this.getsort();
                                _this.getbrandList()
                            }
                        )
                    },
                    onCancel(){
                        iview.Message.info("您取消了删除！");
                    }
                })
            },


        }
    })
</script>
</html>
